<template>
  <div class="fault-experience-lib">
    <el-card>
      <div class="header-row">
        <el-input
          v-model="searchText"
          placeholder="输入关键词搜索（设备/故障现象）"
          clearable
          style="width:240px; margin-right:18px;"
        />
        <el-button type="primary" @click="handleAdd">新增经验</el-button>
      </div>
      <el-table :data="filteredList" border style="margin-top:16px;">
        <el-table-column prop="device" label="设备类型" width="120"/>
        <el-table-column prop="fault" label="故障现象" width="120"/>
        <el-table-column prop="reason" label="主要原因" width="120"/>
        <el-table-column prop="solution" label="处理方法" width="230"/>
        <el-table-column prop="experience" label="经验总结" width="230" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="warning" size="small" text @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" text @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="经验详情" width="520px" destroy-on-close>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="设备类型">{{ detailRow.device }}</el-descriptions-item>
        <el-descriptions-item label="故障现象">{{ detailRow.fault }}</el-descriptions-item>
        <el-descriptions-item label="主要原因">{{ detailRow.reason }}</el-descriptions-item>
        <el-descriptions-item label="处理方法">{{ detailRow.solution }}</el-descriptions-item>
        <el-descriptions-item label="经验总结">{{ detailRow.experience }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="editVisible" :title="editTitle" width="520px" destroy-on-close>
      <el-form :model="editRow" :rules="formRules" ref="formRef" label-width="90px">
        <el-form-item label="设备类型" prop="device">
          <el-input v-model="editRow.device" />
        </el-form-item>
        <el-form-item label="故障现象" prop="fault">
          <el-input v-model="editRow.fault" />
        </el-form-item>
        <el-form-item label="主要原因" prop="reason">
          <el-input v-model="editRow.reason" />
        </el-form-item>
        <el-form-item label="处理方法" prop="solution">
          <el-input v-model="editRow.solution" />
        </el-form-item>
        <el-form-item label="经验总结" prop="experience">
          <el-input v-model="editRow.experience" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible=false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
    <!-- 删除确认弹窗 -->
    <el-dialog v-model="deleteVisible" title="提示" width="320px" center>
      <div>确定要删除该经验条目吗？</div>
      <template #footer>
        <el-button @click="deleteVisible=false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

interface FaultExp {
  device: string
  fault: string
  reason: string
  solution: string
  experience: string
}

// 初始模拟数据
const expList = ref<FaultExp[]>([
  {
    device: '中央空调',
    fault: '不制冷',
    reason: '冷媒泄漏、压缩机故障',
    solution: '检查冷媒压力，修复泄漏，必要时更换压缩机',
    experience: '定期检查冷媒系统压力，可有效预防大部分制冷故障。'
  },
  {
    device: '电梯',
    fault: '门无法关闭',
    reason: '门锁机构卡滞或传感器故障',
    solution: '清洁并润滑门锁，更换损坏传感器',
    experience: '门锁、门机应每月例检一次，避免异物卡滞。'
  },
  {
    device: '净水设备',
    fault: '出水异味',
    reason: '滤芯饱和或管道污染',
    solution: '更换滤芯并冲洗管路',
    experience: '建议按厂商推荐周期更换滤芯，饮用水设备须定期清洗。'
  },
  {
    device: '配电柜',
    fault: '断路器频繁跳闸',
    reason: '负载过大或线路短路',
    solution: '检查负载分配，排查并修复短路点',
    experience: '合理分配用电负荷，避免临时拉线。'
  },
  {
    device: '空气净化器',
    fault: '风量变小',
    reason: '过滤网堵塞',
    solution: '拆卸并清洁或更换过滤网',
    experience: '用户应定期清洗滤网，室内空气差时清洗频率需提升。'
  },
  {
    device: '新风主机',
    fault: '噪音异常',
    reason: '风机轴承老化、安装松动',
    solution: '更换轴承，检查风机固定',
    experience: '风机类设备每年保养，发现异响及时停机排查。'
  },
  {
    device: '照明系统',
    fault: '灯具频繁损坏',
    reason: '电压不稳或灯具质量差',
    solution: '检查电源，选用合格灯具',
    experience: 'LED灯具建议选用认证品牌，线路老化需提前更换。'
  },
  {
    device: '消防泵',
    fault: '启动无反应',
    reason: '控制回路故障、缺相',
    solution: '检测控制回路及电源相序',
    experience: '消防泵每季度应试运行，确保应急时可用。'
  },
  {
    device: '电梯',
    fault: '运行抖动',
    reason: '曳引绳磨损或轨道污染',
    solution: '检查绳索，清理轨道',
    experience: '轿厢运行异常需立即停用检修，防止故障扩大。'
  },
  {
    device: '配电柜',
    fault: '设备过热',
    reason: '接线松动或散热不良',
    solution: '紧固接线，清理散热风道',
    experience: '夏季高温时每日红外测温，过热设备重点巡查。'
  }
])

const searchText = ref('')
const filteredList = computed(() =>
  searchText.value
    ? expList.value.filter(row =>
        row.device.includes(searchText.value) ||
        row.fault.includes(searchText.value) ||
        row.solution.includes(searchText.value)
      )
    : expList.value
)

// 详情弹窗
const dialogVisible = ref(false)
const detailRow = ref<FaultExp>({
  device: '',
  fault: '',
  reason: '',
  solution: '',
  experience: ''
})
function showDetail(row: FaultExp) {
  detailRow.value = { ...row }
  dialogVisible.value = true
}

// 新增/编辑弹窗
const editVisible = ref(false)
const editTitle = ref('新增经验')
const editRow = reactive<FaultExp>({
  device: '',
  fault: '',
  reason: '',
  solution: '',
  experience: ''
})
const formRef = ref()
const formRules = {
  device: [{ required: true, message: '必填', trigger: 'blur' }],
  fault: [{ required: true, message: '必填', trigger: 'blur' }],
  reason: [{ required: true, message: '必填', trigger: 'blur' }],
  solution: [{ required: true, message: '必填', trigger: 'blur' }],
  experience: [{ required: true, message: '必填', trigger: 'blur' }]
}
function handleAdd() {
  editTitle.value = '新增经验'
  Object.assign(editRow, { device: '', fault: '', reason: '', solution: '', experience: '' })
  editVisible.value = true
}
function handleEdit(row: FaultExp) {
  editTitle.value = '编辑经验'
  Object.assign(editRow, row)
  editVisible.value = true
}
function submitEdit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return
    if (editTitle.value.startsWith('编辑')) {
      const idx = expList.value.findIndex(
        t => t.device === editRow.device && t.fault === editRow.fault && t.reason === editRow.reason
      )
      if (idx !== -1) expList.value[idx] = { ...editRow }
      ElMessage.success('编辑成功')
    } else {
      expList.value.unshift({ ...editRow })
      ElMessage.success('新增成功')
    }
    editVisible.value = false
  })
}

// 删除弹窗
const deleteVisible = ref(false)
const deleteTarget = ref<FaultExp | null>(null)
function handleDelete(row: FaultExp) {
  deleteTarget.value = row
  deleteVisible.value = true
}
function confirmDelete() {
  if (deleteTarget.value) {
    expList.value = expList.value.filter(
      t =>
        !(
          t.device === deleteTarget.value!.device &&
          t.fault === deleteTarget.value!.fault &&
          t.reason === deleteTarget.value!.reason
        )
    )
    ElMessage.success('删除成功')
  }
  deleteVisible.value = false
}
</script>

<style scoped>
.fault-experience-lib {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.header-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
</style>
